<template>
	<view class="">
		<!-- <view :style="'height: '+statusBarHeight+'px;'"></view> -->
		<view class="addTop flex">
			<view class="subsection flex-between">
				<view class="subsection_item" :class="current==index?'subsection_activeitem':''"
					@click="subchange(index)" v-for="(item,index) in list" :key="index">{{item}}</view>
			</view>
		</view>
		<view class="" v-if="current==0">
			<view class="addinput flex-between">
				<view class="">SN码 <span>*</span> </view>
				<input type="text" v-model="sn" placeholder="输入SN码"
					placeholder-style="font-weight: 400;font-size: 28rpx;color: #CCCCCC;" />
				<image src="../static/addsao.png" @click="onButtonTap" mode=""></image>
			</view>
			<view class="addinput1">
				<view class="">备注 <span>*</span> </view>
				<textarea class="textarea" v-model="remark" name="" id="" cols="30" rows="10" placeholder="输入备注"
					placeholder-style="font-weight: 400;font-size: 28rpx;color: #CCCCCC;"></textarea>
			</view>
			<view class="addbtn" @click="addBind(sn)">添加设备</view>
		</view>
		<view class="" v-if="current==1">
			<view class="top">
				<view class="btn" @click="onButtonTap">
					<view class="" style="display: flex;align-items: center;">
						<u-icon name="scan" color='#0066FF' size="20"></u-icon>
						<view class="" style="margin-left: 10rpx;">扫描设备二维码</view>
					</view>
				</view>
			</view>
			<view class="bound" @click="show=true">
				<view class="" style="display: flex;">
					<view class="name">业务<span>*</span></view>
					<view class="iclass" :style="plan_task?'color:#333333;':''">
						{{plan_task?plan_task:'请选择业务'}}
					</view>
				</view>
				<image src="../static/down.png" mode=""></image>
			</view>
			<view class="bound">
				<view class="" style="display: flex;">
					<view class="name">设备ID<span>*</span></view>
					<input type="text" v-model="device_id" style="width: 460rpx;" placeholder="请输入设备ID"
						placeholder-class="iclass" />
				</view>
			</view>
			<view class="bound">
				<view class="" style="display: flex;">
					<view class="name">备注<span>*</span></view>
					<input style="width: 400rpx;" v-model="remark" type="text" maxlength="20"
						placeholder="请输入备注(不超过20字)" placeholder-class="iclass" />
				</view>
			</view>
			<view class="bound">
				<view class="" style="display: flex;">
					<view class="name">单条上行<span>*</span></view>
					<input type="text" v-model="up_bandwidth" maxlength="20" placeholder="请输入单条上行"
						placeholder-class="iclass" />
				</view>
				<view class="">Mbps</view>
			</view>
			<view class="bound">
				<view class="" style="display: flex;">
					<view class="name">线路数量<span>*</span></view>
					<input type="text" v-model="line_number" maxlength="20" placeholder="请输入线路数量"
						placeholder-class="iclass" />
				</view>
			</view>
			<view class="bound" @click="isArea=true">
				<view class="" style="display: flex;">
					<view class="name">地域<span>*</span></view>
					<view class="iclass" :style="pickerArea?'color:#333333;':''">{{pickerArea ? pickerArea : "请选择地域"}}
					</view>
				</view>
				<image src="../static/down.png" mode=""></image>
			</view>
			<view class="bound" @click="show1=true">
				<view class="" style="display: flex;">
					<view class="name">运营商<span>*</span></view>
					<view class="iclass" :style="isp?'color:#333333;':''">{{isp?isp:'请选择运营商'}}</view>
				</view>
				<image src="../static/down.png" mode=""></image>
			</view>
			<view class="bound" @click="show2=true" v-if='bizname!=="C"&&bizname!=="D"&&bizname!=="G"'>
				<view class="" style="display: flex;">
					<view class="name">上网方式<span>*</span></view>
					<view class="iclass" :style="diallingTypeText?'color:#333333;':''">
						{{diallingTypeText?diallingTypeText:'请选择上网方式'}}
					</view>
				</view>
				<image src="../static/down.png" mode=""></image>
			</view>
			<view class="bound" @click="show3=true" v-if='bizname!=="C"&&bizname!=="D"&&bizname!=="G"'>
				<view class="" style="display: flex;">
					<view class="name">公网/内网<span>*</span></view>
					<view class="iclass" :style="nat_type?'color:#333333;':''">{{nat_type?nat_type:'请选择公网/内网'}}</view>
				</view>
				<image src="../static/down.png" mode=""></image>
			</view>
			<view class="bound" @click="show4=true" v-if='bizname!=="C"&&bizname!=="D"&&bizname!=="G"'>
				<view class="" style="display: flex;">
					<view class="name">IP协议<span>*</span></view>
					<view class="iclass" :style="ip_protocol?'color:#333333;':''">{{ip_protocol?ip_protocol:'请选择IP协议'}}
					</view>
				</view>
				<image src="../static/down.png" mode=""></image>
			</view>
			<u-picker title="请选择地域" ref="uPicker3" closeOnClickOverlay :show="isArea" :columns="areaList"
				@cancel="isArea=false" @close="isArea=false" @confirm="confirmAreaPick"
				@change="changeHandler1"></u-picker>
			<u-picker :show="show" @cancel='show=false' @confirm="confirm" :columns="planTaskList"></u-picker>
			<u-picker :show="show1" @cancel='show1=false' @confirm="confirm1" :columns="columns1"></u-picker>
			<u-picker keyName="label" :show="show2" @cancel='show2=false' @confirm="confirm2"
				:columns="columns2"></u-picker>
			<u-picker :show="show3" @cancel='show3=false' @confirm="confirm3" :columns="columns3"></u-picker>
			<u-picker :show="show4" @cancel='show4=false' @confirm="confirm4" :columns="columns4"></u-picker>
			<u-picker :show="show5" @cancel='show5=false' @confirm="confirm5" :columns="columns5"></u-picker>
			<u-picker keyName="label" :show="show6" @cancel='show6=false' @confirm="confirm6"
				:columns="columns6"></u-picker>
			<view class="boundbtn" @click="$u.debounce(handleNext, 500)">添加设备</view>
		</view>
	</view>
</template>

<script>
	import dataPicker from '@/util/data/dataPicker.js'
	export default {
		data() {
			return {
				sn: '',
				group_id: null,
				group_name: '选择分组',
				list: ['添加混跑设备', '添加定向设备'],
				current: 0,
				show: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				show5: false,
				show6: false,
				isArea: false,
				planTaskList: [

				],
				columns: [],
				columns1: [
					['移动', '联通', '电信']
				],
				columns2: [
					[{
							label: '固定公网单IP',
							value: 'PUBLIC_SINGLE_IP'
						},
						{
							label: '固定公网多IP',
							value: 'PUBLIC_MULTI_IP'
						}, {
							label: '服务器上网',
							value: 'PPPOE'
						}, {
							label: '路由器上网',
							value: '1VN'
						}
					]
				],
				columns3: [
					['公网', '内网']
				],
				columns4: [
					['双栈', 'IPV4', 'IPV6']
				],
				columns5: [],
				columns6: [
					[{
							label: '火豆',
							value: 'bean',
							type: 1
						},
						{
							label: '激活码',
							value: 'activation',
							type: 2
						}
					]
				],
				areaList: [dataPicker.province, dataPicker.list[0]],
				columnData: dataPicker.list,
				pickerArea: '',
				province: '',
				city: '',
				biz_type: "",
				device_id: "",
				remark: "",
				isp: "移动",
				province: '',
				city: '',
				up_bandwidth: '',
				line_number: "",
				dialing_type: "PUBLIC_SINGLE_IP",
				diallingTypeText: '固定公网单IP',
				nat_type: "公网",
				ip_protocol: "双栈",
				plan_task: "",
				baseInfo: {},
				bizname: '',
				plan_taskname: "",
				showgo: false,
				huomoney: 0,
				activationmoney: 0,
				moneytype: '',
				moneyTypeText: "",
				type: 1,
				latitude: '',
				longitude: '',
				addressName: '',
				statusBarHeight: 0
			};
		},
		onLoad(options) {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.current = options.current || 0
			if (options.sn) {
				this.sn = options.sn
			}
			if (options.current && options.type == 1) {
				setTimeout(() => {
					this.$nextTick(() => {
						this.onButtonTap()
					})
				}, 1200)
			}
			this.getPlanTaskList()
		},
		onShow() {
			let _this = this
			uni.$on('updateData', function(data) {
				_this.group_id = data.id
				_this.group_name = data.name
			})
		},

		methods: {
			back() {
				uni.navigateBack()
			},
			subchange(index) {
				console.log(index)
				this.current = index
				if (index) {

				}
			},
			onButtonTap(e) {
				let _that = this
				//#ifdef H5
				this.$fun.msg('H5暂不支持扫码！')
				//#endif
				//#ifdef APP-PLUS||MP-WEIXIN
				uni.scanCode({
					success: function(res) {
						if (_that.current==1) {
							_that.device_id = res.result
						} else {
							_that.sn = res.result
						}
					}
				});
				//#endif
			},
			addBind(sn) {
				this.$fun.ajax.post('butt/bind', {
					sn,
					group_id: -1,
					remark: this.remark
				}).then(res => {
					this.$fun.msg(res.msg)
					if (res.code == 1) {
						this.sn = ""
						this.$fun.jump('', 4, 1200)
					}
				})
			},
			// 业务列表
			async getPlanTaskList() {
				const res = await this.$fun.ajax.post('bind/getTasks')
				this.planTaskList = [res.data]
			},
			changeHandler1(e) {
				// this.change(e)
				const {
					columnIndex,
					value,
					values,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker3
				} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			confirmAreaPick(e) {
				this.pickerArea = e.value.join('-')
				this.province = e.value[0]
				this.city = e.value[1]
				this.isArea = false
			},
			confirm(item) {
				this.show = false
				this.plan_task = item.value[0]
			},
			confirm1(item) {
				this.show1 = false
				this.isp = item.value[0]
			},
			confirm2(item) {
				this.show2 = false
				this.dialing_type = item.value[0].value
				this.diallingTypeText = item.value[0].label
			},
			confirm3(item) {
				this.show3 = false
				this.nat_type = item.value[0]
			},
			confirm4(item) {
				this.show4 = false
				this.ip_protocol = item.value[0]
			},
			confirm5(item) {
				this.show5 = false
				this.biz_type = item.indexs[0]
				this.bizname = item.value[0]
				this.$nextTick(() => {
					if (this.bizname == 'A') {
						this.bluetasks()
					}
					if (this.bizname !== "C") {
						this.line_number = ''
					}
					if (this.bizname !== "C" && this.bizname !== "D" && this.bizname !== "G") {
						this.dialing_type = ''
						this.nat_type = ''
						this.ip_protocol = ''
					}
				})
			},
			confirm6(item) {
				this.show6 = false
				this.moneytype = item.value[0].value
				this.moneyTypeText = item.value[0].label
				this.type = item.value[0].type
			},
			//选择位置
			chooseLocation() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						_this.addressName = res.name
					}
				});
			},
			bluetasks() {
				this.$fun.ajax.post('blue/tasks', {
					biz_type: this.biz_type
				}).then(res => {
					let arr = []
					for (let var1 in res.data) {
						arr.push(res.data[var1])
					}
					this.columns = [arr]
				})
			},
			async handleNext() {
				let {
					biz_type,
					device_id,
					remark,
					isp,
					province,
					city,
					up_bandwidth,
					line_number,
					dialing_type,
					nat_type,
					ip_protocol,
					plan_task
				} = this
				let formModel = {
					deviceid: device_id,
					linenumber: line_number,
					upbandwidth: up_bandwidth,
					isp,
					city,
					province,
					diallingtype: dialing_type,
					plantask: plan_task,
					remark,
					nattype: nat_type,
					ipprotocol: ip_protocol
				}
				// if (!plantask) return this.$fun.msg('请选择业务')
				if (!device_id) return this.$fun.msg('请填写设备ID')
				if (!line_number) return this.$fun.msg('请填写线路数')
				if (!up_bandwidth) return this.$fun.msg('请填写上行宽带')
				if (!isp) return this.$fun.msg('请选择运营商')
				if (!city || !province) return this.$fun.msg('请选择地域')
				if (!dialing_type) return this.$fun.msg('请选择上网方式')
				if (!remark) return this.$fun.msg('请填写备注')
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				const res = await this.$fun.ajax.post('bind/add', formModel)
				setTimeout(()=>{
					uni.hideLoading()
				},1200)
				if (res.code == 1) {
					if (dialing_type === 'PUBLIC_SINGLE_IP') {
						console.log('固定公网单ip');
						this.$fun.jump(`/pages/equipment/equipment`, 1)
					} else {
						console.log('服务器');
						this.$fun.jump(`/pageC/netCard/netCard?ids=${res.data}`)
					}
					// uni.navigateBack()
				}


			},
			showgobtn() {
				let {
					biz_type,
					device_id,
					remark,
					isp,
					province,
					city,
					up_bandwidth,
					line_number,
					dialing_type,
					nat_type,
					ip_protocol,
					plan_task,
					latitude,
					longitude,
					addressName
				} = this
				if (!plan_task) return this.$fun.msg('请选择业务')
				if (!device_id) return this.$fun.msg('请填写设备ID')
				if (!remark) return this.$fun.msg('请填写备注')
				if (!line_number) return this.$fun.msg('请填写线路数')
				if (!up_bandwidth) return this.$fun.msg('请填写上行宽带')
				if (!city || !province) return this.$fun.msg('请选择地域')
				if (!isp) return this.$fun.msg('请选择运营商')
				if (!dialing_type) return this.$fun.msg('请选择上网方式')
				if (!nat_type) return this.$fun.msg('请选择公网/内网')
				if (!ip_protocol) return this.$fun.msg('请选择IP协议')
				// if (!addressName) return this.$fun.msg('请选择位置')
				this.showgo = true
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2F4F7;
	}

	.addTop {
		width: 750rpx;
		height: 88rpx;
		border-radius: 1rpx;
		padding: 0 30rpx;
		background: #F2F4F7;
		position: sticky;
		top: 0;
		z-index: 1;
		justify-content: center;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.subsection {
		width: 480rpx;
		background-color: #EBEBEB;
		border-radius: 28rpx;
		margin-left: 54rpx;

		&_item {
			width: 240rpx;
			height: 56rpx;
			border-radius: 28rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #999999;
			text-align: center;
			line-height: 56rpx;
		}

		&_activeitem {
			width: 240rpx;
			height: 56rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			transition-duration: 0.3s;
			transition-timing-function: ease-in-out;
		}
	}

	.addinput {
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 24rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		margin: 20rpx auto;
		padding: 0 20rpx;

		span {
			font-weight: 400;
			font-size: 28rpx;
			color: #0066FF;
		}

		input {
			width: 460rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.addinput1 {
		width: 690rpx;
		height: 500rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 24rpx;
		padding: 20rpx;
		margin: 0 auto;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

		span {
			font-weight: 400;
			font-size: 28rpx;
			color: #0066FF;
		}

		.textarea {
			width: 640rpx;
			margin-top: 30rpx;
		}
	}

	.addbtn {
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		width: 690rpx;
		height: 88rpx;
		background: #0066FF;
		border-radius: 44rpx;
		margin: 90rpx auto;
		line-height: 88rpx;
		text-align: center;
	}

	.top {
		width: 750rpx;
		height: 148rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.btn {
			width: 690rpx;
			height: 88rpx;
			border-radius: 44rpx;
			border: 2rpx solid #0066FF;
			font-weight: 500;
			font-size: 32rpx;
			color: #0066FF;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}
	}

	.bound {
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		align-items: center;
		margin: 0rpx auto 30rpx;

		.name {
			width: 150rpx;
			margin-right: 30rpx;
		}

		span {
			font-weight: 400;
			font-size: 28rpx;
			color: #0066FF;
		}

		input {
			width: 306rpx;
		}

		.iclass {
			font-weight: 400;
			font-size: 28rpx;
			color: #CCCCCC;
		}

		image {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.boundbtn {
		width: 690rpx;
		height: 88rpx;
		background: #0066FF;
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 60rpx auto;
	}

	.showpaw {
		width: 500rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		position: fixed;
		top: 30%;
		left: 18.5%;
		box-sizing: border-box;
		padding: 40rpx 30rpx;

		.bound {
			width: 400rpx;
			height: 80rpx;
			background: #F6F6F6;
			border-radius: 24rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			align-items: center;
			margin: 30rpx auto 0;

			.name {
				// width: 150rpx;
				margin-right: 30rpx;
			}

			span {
				font-weight: 400;
				font-size: 28rpx;
				color: #FF7C4D;
			}

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.text {
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.btn {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			&_close {
				width: 186rpx;
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #0066FF;
				font-weight: 500;
				font-size: 26rpx;
				color: #0066FF;
				line-height: 72rpx;
				text-align: center;
			}

			&_sure {
				width: 186rpx;
				height: 72rpx;
				background:#0066FF;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}

		.bot {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			text-align: center;
			margin-top: 40rpx;

			span {
				color: #0066FF;
				margin-left: 20rpx;
			}
		}
	}
</style>